<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环遍历的测试</title>
    <script src="../../js/jquery-3.4.1.js"></script>
</head>
<body>

</body>
<script>
    const arr1 = [1, 3, 5, 7, 9];
    const arr2 = [2, 4, 6, 8, 10];

    //这是一个伪数组, 伪数组的连个条件: 1. 具有length属性来描述key-value的个数. 2. 有键值对这样的key-value模型存储数据.
    const arr3 = {'name': '张三', 'age': 23, 'id': 12345, length : 3};

    $(function () {
        jsForEach();
        jqueryEachMethod();
        jsMapFunction();
        jqueryMap();
        jqueryMapAndEachDifference();
        objArrEach();
        eachDemo();
        test111();
        eachObjArr();
    });

    /*
    功能:
        比较jquery的each和map方法的差异.
    输出:
    ```
    res1: 1,3,5,7,9, typeof:object
    res2: 11,13,15,17,19, typeof:object
    ```
    说明:
        1. map回掉函数的返回值会替换掉原来对象的index或key对应的值; 但是each不会, each只是迭代不对数据做处理.
    */
    function jqueryMapAndEachDifference() {
        const res1 = $.each(arr1, (value, index) => {
            return value += 10;
        });

        const res2 = $.map(arr1, (value, index) => {
            return value += 10;
        });

        console.log("res1: " + res1 + ", typeof:" + typeof res1);
        console.log("res2: " + res2 + ", typeof:" + typeof res2);
    }

    /*
    功能:
        使用jquery的map方法来迭代数组和伪数组.
    输出:
    ```
    jquery-map-索引: 0, 对应的值: 1
    jquery-map-索引: 1, 对应的值: 3
    jquery-map-索引: 2, 对应的值: 5
    jquery-map-索引: 3, 对应的值: 7
    jquery-map-索引: 4, 对应的值: 9
    jquery-map-索引: name, 对应的值: 张三
    jquery-map-索引: age, 对应的值: 23
    jquery-map-索引: id, 对应的值: 12345
    jquery-map-索引: length, 对应的值: 3
    ```
    说明:
        1. 迭代数组时的回调函数的参数说明:
            - index: 当前迭代的下标;
            - value: 当前迭代的下标对应的值.
        2. 迭代伪数组时的参数说明:
            - index: 当前迭代的key.
            - value: 当前得带的value.
    */
    function jqueryMap() {
        $.map(arr1, (value, index) => {
            console.log("jquery-map-索引: " + index + ", 对应的值: " + value);
        });

        $.map(arr3, (value, index) => {
            console.log("jquery-map-索引: " + index + ", 对应的值: " + value);
        });
    }

    /*
    功能:
        使用原生js的map方法遍历数组.
    输出:
    ```
    js-map-索引: 0, 对应的值: 1, 正在迭代的对象: 1,3,5,7,9
    js-map-索引: 1, 对应的值: 3, 正在迭代的对象: 1,3,5,7,9
    js-map-索引: 2, 对应的值: 5, 正在迭代的对象: 1,3,5,7,9
    js-map-索引: 3, 对应的值: 7, 正在迭代的对象: 1,3,5,7,9
    js-map-索引: 4, 对应的值: 9, 正在迭代的对象: 1,3,5,7,9
    ```
    说明:
        1. map方法传入的回调函数的参数说明:
            - index: 下标;
            - value: 下标对应的值;
            - array: 正在迭代的数组.
    注意:
        1. 迭代伪数组会报错.jquery-3.4.1.js:3852 Uncaught TypeError: arr3.map is not a function.
    */
    function jsMapFunction() {
        arr1.map((value, index, array) => {
            console.log("js-map-索引: " + index + ", 对应的值: " + value + ", 正在迭代的对象: " + array);
        });
        /*arr3.map((value, index, array) => {
            console.log("js-map-索引: " + index + ", 对应的值: " + value + ", 正在迭代的对象: " + array);
        });*/
    }

    /*
    功能:
        使用jquery的each函数来遍历数组和伪数组.
    输出:
        jquery-each-索引值: 1, 对应的值: 0
        jquery-each-索引值: 3, 对应的值: 1
        jquery-each-索引值: 5, 对应的值: 2
        jquery-each-索引值: 7, 对应的值: 3
        jquery-each-索引值: 9, 对应的值: 4
        jquery-each-索引值: 张三, 对应的值: name
        jquery-each-索引值: 23, 对应的值: age
        jquery-each-索引值: 12345, 对应的值: id
        jquery-each-索引值: 3, 对应的值: length
    说明:
        1. 可以发现, each方法遍历伪数组时回掉函数的参数中和js的forEach是不同的, 回掉函数的参数说明:
            - value: 对应的值, 也就是key-value模型中的value.
            - index: 对应的键值, 也就是key-value模型中的key.
        2. 遍历数组时的回掉函数参数说明:
            - value: 对应值;
            - index: 对应下标.
     */
    function jqueryEachMethod() {
        console.log(arr3);
        /*
        1. function each(obj, callback)方法有两个参数:
            - obj: 迭代的对象;
            - callback: 回掉函数;
         */
        $.each(arr1, (value, index) => {
            console.log("jquery-each-索引值: " + index + ", 对应的值: " + value);
        });

        $.each(arr3, (value, index) => {
            console.log("jquery-each-索引值: " + index + ", 对应的值: " + value);
        });
    }

    /**
     * 功能:
     *      使用js的forEach方法来遍历数组.
     * 输出:
     * ```
     * 索引值: 0, 对应的值: 1
     * 索引值: 1, 对应的值: 3
     * 索引值: 2, 对应的值: 5
     * 索引值: 3, 对应的值: 7
     * 索引值: 4, 对应的值: 9
     * ```
     * 说明:
     *      1. =>是js中的lambda表达式语法, 两个参数的意思是:
     *          - index: 当前遍历的下标;
     *          - value: 当前下标对应的值;
     * 注意:
     *      1. js的原生forEach只能遍历数组, 不能遍历伪数组;
     */
    function jsForEach() {
        arr1.forEach((value, index) => {
            console.log("索引值: " + index + ", 对应的值: " + value);
        });

        //arr3函数没有forEach这个函数, 如果强行使用会在浏览器中报错没有这个函数.
    }

    function objArrEach() {
        let objArr = [
            {
                id: 1,
                name: 's1'
            },
            {
                id: 2,
                name: 's2'
            }
        ];
        $.each(objArr, function (index, value) {
            console.log(index, value);
        })
    }

    let objArr2 = [
        {
            id: 1,
            name: 's1'
        },
        {
            id: 2,
            name: 's2'
        }
    ];
    function eachDemo() {
        $.each(objArr2, function (index, value) {
            console.log(index, value);
        })
    }

    function test111() {
        console.log("-------test111-------");
        let arr3 = [1, 2, 3, 4];
        $.each(arr3, function (index, value) {
            console.log(index, value);
        });
    }


    function eachObjArr() {
        console.log("-------eachObjArr-------");
        let arr3 = [{
            1: [1, 2, 3]
        }, {
            2: [2, 3, 4]
        }];
        $.each(arr3, function (index, value) {
            console.log(index, value);
        });
    }




</script>
</html>